<template>
    <div id='box'>
        <video src="http://pic.qiantucdn.com/58pic/video/28/33/93/28339343_38.mp4" autoplay loop ></video>
       <div id="login">
        <h2>乐乐橙后台管理系统</h2>
        <el-form :model="form">
            <el-form-item >
                <el-input v-model="form.name" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item >
                <el-input v-model="form.pwd" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
           
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即登陆</el-button>
              
            </el-form-item>

        </el-form>
           </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: "",
        pwd:''
      }
    };
  },
  methods: {
    onSubmit() {
        // this.$router.push('/home')
       let name= this.form.name 
       let pwd = this.form.pwd
        if(name ==='admin' , pwd ==="123456"){
           this.$router.push('/home')
        }else{
            alert("账号密码错误")
        }
      
    }
  }
};
</script>
<style scoped>

video {
  height: 100%;
  width: 100%;
  position: fixed;
  right: 0px;
  bottom: 0px;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
}
h2{
   font-family: serif;
   margin: 20px 0;
}

#box{
 display: grid;

  justify-content: center;

  align-items: center; 
   height: 100%;
}
#login{
    width: 350px;
    background-color: #fff;
    margin: auto;
    display: grid;
    justify-content: center;
    position: relative;
    background: rgba(255,255,255,0.3);
    
}
</style>


  
